<!--
Copyright © 2017, Che-Wei Hsu <cwxhsu@gmail.com>
This file is part of the MintCM.
Some rights reserved. See README.
-->

<html>

<head>

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery_main.js"></script>
<script type="text/javascript" src="json3.js"></script>
<script type="text/javascript" src="mcm_jslib_api.js"></script>
<script type="text/javascript" src="mcm_jslib_data_info_auto.js"></script>
<script type="text/javascript" src="web_app_0304_script.js"></script>
<link rel="stylesheet" href="web_app_0304_style.css">

<script type="text/javascript">
var mcm_dv = null;

function body_init()
{
    var self_jslib, req_cmd, req_ans, data_array, i, j, tmp_html;


    // 指定要讀出的資料.
    req_cmd = "&get.device.vap.*" +
              "&get.device.vap.*.station.*";

    // 送出讀出資料請求.
    self_jslib = new mcm_jslib_lib_t();
    self_jslib.socket_path = "@mintcm";
    self_jslib.session_permission = mcm_session_permission.ro;
    self_jslib.session_stack_size = 0;
    self_jslib.request_command = req_cmd;
    self_jslib.data_format = mcm_data_format.all_default;
    self_jslib.other_query = "";
    rep_ret = mcm_jslib_obtain_config(self_jslib);
    if(rep_ret.rep_code < mcm_return_code.pass)
    {
        alert("call mcm_jslib_obtain_config() fail" +
              "[" + rep_ret.rep_code + "]");
        mcm_jslib_run_script(rep_ret.rep_data);
        return;
    }
    // 處理資料格式.
    mcm_dv = JSON.parse(rep_ret.rep_data);

    // 顯示 device.vap.*
    for(i = 0; i < mcm_dv.device.vap.length; i++)
    {
        tmp_html = "device.vap.@" + (i + 1);
        $("#vap_select").append($("<option></option>").attr("value", i).text(tmp_html));
    }
    if(mcm_dv.device.vap.length > 0)
        change_vap();

    // 每一筆 device.vap.{i} 建立一個表格.
    for(tmp_html = "", i = 0; i < mcm_dv.device.vap.length; i++)
        tmp_html += jsapi_make_empty_table("vap_list_" + i, "css_table1");
    $("#table_list").html(tmp_html);

    // 顯示表格的標題.
    for(i = 0; i < mcm_dv.device.vap.length; i++)
    {
        data_array = new Array(1);
        data_array[0] = "device.vap.@" + (i + 1);
        tmp_html = jsapi_make_trtd("css_td1", data_array);
        $("#vap_list_" + i).find("tbody").append(tmp_html);
    }

    // 將 device.vap.{i}.station.* 資料顯示在 device.vap.{i} 的表格中.
    for(i = 0; i < mcm_dv.device.vap.length; i++)
    {
        tmp_html = "";
        tmp_html += "<table class=\"css_table1\">"
        tmp_html += "<tr>"
        tmp_html += "<td class=\"css_td1\" colspan=\"4\">"
        tmp_html += "device.vap.@" + (i + 1) + ".station.*";
        tmp_html += "</td>"
        tmp_html += "</tr>";
        tmp_html += "<tr>";
        tmp_html += "<td class=\"css_td1\">no</td>";
        tmp_html += "<td class=\"css_td1\">ekey</td>";
        tmp_html += "<td class=\"css_td1\">mac_addr</td>";
        tmp_html += "<td class=\"css_td1\">rule</td>";
        tmp_html += "</tr>";

        for(j = 0; j < mcm_dv.device.vap[i].station.length; j++)
        {
            // 顯示 device.vap.{i}.station.{j}
            data_array = new Array(4);
            data_array[0] = j + 1;
            data_array[1] = mcm_dv.device.vap[i].station[j].ekey;
            data_array[2] = mcm_jslib_convert_html_str(mcm_dv.device.vap[i].station[j].mac_addr);
            data_array[3] = mcm_dv.device.vap[i].station[j].rule;
            tmp_html += jsapi_make_trtd("css_td1", data_array);
        }

        tmp_html += "</table>";

        $("#vap_list_" + i).find("tbody").append(tmp_html);
    }
}

function change_vap()
{
    var vap_index, data_array;


    vap_index = $("#vap_select").find(":selected").val();

    data_array = new Array(3);
    data_array[0] = new Array();
    data_array[1] = new Array();
    data_array[2] = new Array();
    data_array[0].push(mcm_dv.device.vap[vap_index].ekey);
    data_array[1].push(mcm_jslib_convert_html_str(mcm_dv.device.vap[vap_index].ssid));
    data_array[2].push(mcm_dv.device.vap[vap_index].channel);
    tmp_html = jsapi_make_trtd("css_td1", data_array);
    $("#vap_info").find("tbody").children().remove();
    $("#vap_info").find("tbody").append(tmp_html);
}

// 增加 device.vap.*.station.*
function config_station_add()
{
    var self_jslib, req_cmd = "", req_ans, vap_index, tmp_path;


    // 取得 device.vap.* 的 index.
    vap_index = $("#vap_select").find(":selected").val();

    // 填充 device.vap.{vap_key}.station.{station_key} 路徑.
    tmp_path = "device" +
               ".vap.#" + mcm_dv.device.vap[vap_index].ekey +
               ".station.#" + $("#ekey_text").val();

    // 增加 device.vap.{vap_key}.station.{station_key}
    req_cmd += "&add." + tmp_path + "=";
    // 設定 device.vap.{vap_key}.station.{station_key}
    req_cmd += "&set." + tmp_path + ".mac_addr=" +
               mcm_jslib_convert_submit_str($("#mac_addr_text").val());
    req_cmd += "&set." + tmp_path + ".rule=" +
               $("#rule_text").val();

    // 送出修改資料請求.
    self_jslib = new mcm_jslib_lib_t();
    self_jslib.socket_path = "@mintcm";
    self_jslib.session_permission = mcm_session_permission.rw;
    self_jslib.session_stack_size = 0;
    self_jslib.request_command = req_cmd;
    self_jslib.after_complete = mcm_after_complete.reload;
    self_jslib.other_query = "";
    rep_ret = mcm_jslib_submit_config(self_jslib);
    if(rep_ret.rep_code < mcm_return_code.pass)
    {
        alert("call mcm_jslib_submit_config() fail" +
              "[" + rep_ret.rep_code + "]");
        mcm_jslib_run_script(rep_ret.rep_data);
        return;
    }
    mcm_jslib_run_script(rep_ret.rep_data);
}
</script>

</head>

<body onload="body_init()">

  <div>[add][device.vap.*.station.*]</div>

  <table id="vap_info" class="css_table1">
    <thead>
      <tr>
        <td class="css_td1" colspan="3">device.vap.*</td>
      </tr>
      <tr>
        <td class="css_td1" colspan="3">
          <select id="vap_select" onchange="change_vap()"></select>
        </td>
      </tr>
      <tr>
        <td class="css_td1">ekey</td>
        <td class="css_td1">ssid</td>
        <td class="css_td1">channel</td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <table class="css_table1">
    <tr>
      <td class="css_td1" colspan="4">device.vap.*.station.*</td>
    </tr>
  	  <tr>
      <td class="css_td1">ekey</td>
      <td class="css_td1">mac_addr</td>
      <td class="css_td1">rule</td>
    </tr>
    <tr>
      <td class="css_td1">
        <input id="ekey_text" type="text" size="8">
      </td>
      <td class="css_td1">
        <input id="mac_addr_text" type="text" size="32">
      </td>
      <td class="css_td1">
        <input id="rule_text" type="text" size="8">
      </td>
    </tr>
  </table>

  <button type="button" onclick="config_station_add()">add</button>
  <br><br>

  <div id="table_list"></div>

</body>

</html>
